<style>
    
    .container {
        display: flex;
        align-items: center; 
        gap: 15px; 
        padding: 20px; 
        background-color: #ffffff; 
        border-radius: 8px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        transition: all 0.3s ease; 
    }
    
    
    input {
        background-color: #f7f7f7; 
        border: 1px solid #dcdcdc; 
        padding: 10px; 
        border-radius: 4px; 
        font-size: 16px; 
        color: #333333; 
        transition: background-color 0.3s ease; 
    }
    
    
    .container:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
    }
    
    
    input:hover {
        background-color: #eaeaea; 
    }
    #buttons {
        padding: 10px 20px; 
        background-color: #007bff; 
        color: white; 
        border: none; 
        border-radius: 4px; 
        font-size: 16px; 
        cursor: pointer; 
        transition: background-color 0.3s ease, transform 0.2s ease; 
    }
    </style>
        <div class="container">
            <label for="readonlyInput">礼包码:</label>
            <input type="text" id="readonlyInput" value="" >
            <button id="buttons"  type="button">兑换</button>
            <div>
                <label id="labeltofk"></label>
            </div>
        </div>
        <script>
            function fetchgetormake(getsid,userinput){
                if(userinput === ''){
                    alert('请输入兑换码');
                    return false;
                }
                const formData = new FormData();
                formData.append('id', getsid);
                formData.append('cdk', userinput);
                fetch('getcdk.php', {
                    method: 'POST',
                    body: formData
                })
                .then(function (response) {
                    return response.json();
                }).then(function (data) {
                    if(data.status === 200){
                        alert('兑换成功');
                        document.getElementById('labeltofk').innerText = data.msg;
                    }else{
                        document.getElementById('labeltofk').innerText = data.msg;
                    }
                });
                }
                
            const searchParams = new URLSearchParams(window.location.search);
            let abids = searchParams.get('cid');
            document.getElementById('buttons').addEventListener('click', function () {
                fetchgetormake(abids,document.getElementById('readonlyInput').value);
            });
        </script>